<!-- 微信公众号的登录回调页 -->
<template>
	<!-- 登陆页 -->
	<view class="container" style="background-image: url('../../static/images/login-bj.png');">

		<!-- <image class="login-bg" src="../../static/images/register_bg.png" mode=""></image> -->
		<view class="login-box">
			<!-- <view class="name">注册</view> -->
			<view class="login-from">
				<form class="" @submit="formSubmit">
					<view class="form-item">
						<!-- <view class="title">
							手机号
						</view> -->
						<input placeholder-style="font-size: 14px;" :maxlength='11' type="tel" name="phone"
							placeholder="请输入手机号" />
					</view>
					<view class="form-item" style="display: flex;align-items: center;padding: 10rpx;">
					<!-- 	<view class="title">
							用户名
						</view> -->
						<input placeholder-style="font-size: 14px;" :maxlength='11' type="text" name="username"
							placeholder="请输入验证码" />
						<view style="padding: 18rpx 32rpx;background: #54C5C1;font-size: 30rpx;font-weight: 550;color: #fff;border-radius: 45rpx;">获取验证码</view>
					</view>
					<view class="form-item">
					<!-- 	<view class="title">
							密码
						</view> -->
						<input placeholder-style="font-size: 14px;" type="password" :maxlength='11' :password="true"
							name="password" placeholder="请输入新密码" />

					</view>
					<view class="form-item">
					<!-- 	<view class="title">
							确认密码
						</view> -->
						<input placeholder-style="font-size: 14px;" type="password" :maxlength='11' :password="true"
							name="confirmPassword" placeholder="请再次输入新密码" />

					</view>
					<!-- <view class="action">
						<text>登录</text>

						<text></text>
					</view> -->
					<button class="submit-btn" hover-class="none" form-type="submit" @click="sliderVerify">
						确认
					</button>
					<view class="agree">
						<checkbox-group @change="changeAgree">
							<label>
								<checkbox value="agree" color="#457DF0" style="transform:scale(0.6)" />
							</label>

						</checkbox-group>
						<text>我已阅读并同意<!-- <text style="color: #4667E2;">《用户服务协议》</text>、 --><text
								style="color: #950F16;" @click="checkProtocol">《隐私政策》</text> </text>
					</view>
				</form>
			</view>

		</view>
		<zmm-slider-verify ref="sliderVerifyRef" verifyImg="" @success="successHandle" @error="errorHandle"
			@close="closeHandle"></zmm-slider-verify>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue'
	import test from '@/sheep/helper/test.js';
	import
	AuthUtil
	from '@/sheep/api/member/auth';
	import {
		deepClone
	}

	from '@/sheep/helper/index'
	const formInfo = reactive({
		username: '',
		password: '',
		phone: '',
		confirmPassword: '',
		payPassword: '',
		code: '',

	})
	const isAgree = ref(false)
	onLoad(
		() => {
			var paraString = location.search;
			var paras = paraString.split('=');

			if (paras[1]) {
				formInfo.code = paras[1];
			} else {
				formInfo.code = '1817840189498839042';
			}
			console.log('formInfo', formInfo)
		})

	// onLoad(async (options) => {
	// 	// #ifdef H5
	// 	// 将 search 参数赋值到 options 中，方便下面解析
	// 	new URLSearchParams(location.search).forEach((value, key) => {
	// 		options[key] = value;
	// 	});
	// 	// 执行登录 or 绑定，注意需要 await 绑定
	// 	const event = options.event;
	// 	const code = options.code;
	// 	const state = options.state;
	// 	if (event === 'login') { // 场景一：登录
	// 		await sheep.$platform.useProvider().login(code, state);
	// 	} else if (event === 'bind') { // 场景二：绑定
	// 		await sheep.$platform.useProvider().bind(code, state);
	// 	}

	// 	// 检测 H5 登录回调
	// 	let returnUrl = uni.getStorageSync('returnUrl');
	// 	if (returnUrl) {
	// 		uni.removeStorage({
	// 			key: 'returnUrl'
	// 		});
	// 		location.replace(returnUrl);
	// 	} else {
	// 		// uni.redirectTo({
	// 		// 	url: '/',
	// 		// });
	// 	}
	// 	// #endif
	// })
	const checkProtocol = () => {
		uni.navigateTo({
			url: '/pages/public/richtext?title=隐私协议'
		})
	}
	const sliderVerifyRef = ref(null)
	//显示验证组件
	const sliderVerify = () => {
		// sliderVerifyRef.value.show()

	}
	//验证通过回调
	const successHandle = (e) => {
		console.log(e)
	}
	//验证失败回调
	const errorHandle = (e) => {
		console.log(e)
	}
	//组件关闭回调
	const closeHandle = (e) => {
		console.log(e)
		// uni.switchTab({
		// 	url: '/pages/index/index',
		// });


	}
	const changeAgree = (e) => {

		if (e.detail.value.length > 0) {
			isAgree.value = true
		} else {
			isAgree.value = false
		}
	}
	const formSubmit = async (e) => {
		formInfo.username = e.detail.value.username
		formInfo.password = e.detail.value.password
		formInfo.phone = e.detail.value.phone
		formInfo.confirmPassword = e.detail.value.confirmPassword
		formInfo.payPassword = e.detail.value.payPassword
		formInfo.code = e.detail.value.code
		console.log(formInfo, isAgree.value)
		console.log('test.mobile(formInfo.phone)', test.mobile(formInfo.phone))

		if (!formInfo.username) return uni.showToast({
			title: '请输入用户名',
			icon: 'none'
		})
		if (/\s/.test(formInfo.username)) return uni.showToast({
			title: '用户名不能存在空格',
			icon: 'none'
		})
		if (!formInfo.password) return uni.showToast({
			title: '请输入密码',
			icon: 'none'
		})
		if (!formInfo.phone) return uni.showToast({
			title: '请输入手机号',
			icon: 'none'
		})
		if (!test.mobile(formInfo.phone)) return uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		})
		if (!formInfo.confirmPassword) return uni.showToast({
			title: '请输入确认密码',
			icon: 'none'
		})
		if (!formInfo.payPassword) return uni.showToast({
			title: '请输入支付密码',
			icon: 'none'
		})
		if (!formInfo.code) return uni.showToast({
			title: '请输入邀请码',
			icon: 'none'
		})
		if (formInfo.password != formInfo.confirmPassword) return uni.showToast({
			title: '两次密码不一致',
			icon: 'none'
		})

		if (!isAgree.value) return uni.showToast({
			title: '请同意用户协议',
			icon: 'none'
		})
		let data = deepClone(formInfo)
		delete data.confirmPassword
		const res = await AuthUtil.registerUser(data)
		console.log('注册', res)
		if (res.code == 0) {
			setTimeout(() => {
				uni.redirectTo({
					url: '/pages/index/login',
				});
			}, 3000)
		}
	}
</script>
<style lang="scss" scoped>
	page {
		// background: linear-gradient(to bottom, #EFF6FF, #D5DDF8);
	}

	.container {
		padding:0 20rpx;
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		justify-content: center;
		background-size: cover; /* 让背景图片覆盖整个容器 */
		background-position: center; /* 将图片中心对齐到容器中心 */
		background-repeat: no-repeat; /* 防止图片重复 */

		.login-bg {
			position: fixed;
			top: -13%;
			left: -33%;
		}

		.login-box {
			width: 100%;
			padding:25rpx 45rpx;
			box-sizing: border-box;
			box-sizing: border-box;
			background:#fff;
			border-radius: 35rpx;
			margin-top: 150rpx;
			.name {
				font-weight: bold;
				font-size: 1.5rem;
				text-align: center;
			}

			.login-from {
				margin-top: 30px;

				.form-item {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 20rpx;
					box-sizing: border-box;
					margin-bottom: 40rpx;
					border-radius: 55rpx;
					border: 1rpx solid #A2A2A2;
					// background-color: #EDF2FD;
					// box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);

					.title {
						// font-size: 15px;
						// font-weight: 550;
						font-size: 26rpx;
					}

					input {
						margin-left: 25px;
					}
				}

				.action {

					font-size: 13px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 5px;

				}



				.submit-btn {
					width: 100%;
					font-weight: 550;
					margin-top: 60px;
					padding: 10rpx 0;
					border-radius: 50px;
					color: #fff;
					background-color: #950F16;
					line-height: 2.1;
					font-size: 16px;
					border: none;
					box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3),
						-4px -4px 8px rgba(255, 255, 255, 0.3);
				}

				.agree {
					width: 90%;
					margin-top: 10px;
					padding: 0 20px;
					font-size: 12px;
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>